<template>
  <div class="nav_box">
    <Nav />
    <Menu />
  </div>
  <Swiper />
  <Fonction />
  <div class="news-box">
    <img class="news-img" src="@/assets/bg1.png" />
    <div class="news">
      <div class="news-left" ref="newsLeft">
        <Title :title="'新闻动态'" :tit="'New & Events'" :more="true" />
        <div class="tran-box">
          <img class="news-img" :src="newsImg" />
        </div>
        <div class="news-box1">
          <div
            class="new-item"
            @click="toNews(item.id)"
            v-for="item in newsList"
            :key="item.id"
          >
            <div>{{ item.smallTitle }}</div>
            <div>{{ item.createTime.substring(0, 10) }}</div>
          </div>
        </div>
      </div>
      <div class="news-center"></div>
      <div class="news-right" ref="newsRight">
        <Title :title="'通知公告'" :tit="'Notices of work'" :more="true" />
        <div class="right-box">
          <div
            class="new-item"
            @click="toNews(item.id)"
            v-for="(item, index) in noticeList"
            :key="item.id"
          >
            <div>
              {{ item.smallTitle }}
            </div>
            <!-- <div>{{ item.createTime.substring(0, 10) }}</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="link-box" ref="linkItem">
    <img class="link-img" src="@/assets/bg2.jpg" />
    <Title
      class="link-title"
      title="教育教学评估"
      :tit="'Education teaching evaluation'"
      :more="false"
      :color="'black'"
    />

    <div>
      <div class="file-box">
        <div class="file-items" ref="fileRef1">
          <div class="file-bg file-bg1" @click="toMore(1)">教学质量保障</div>
          <div class="file-item-box">
            <div
              class="file-item"
              v-for="item in list1"
              :key="item.id"
              @click="toNews(item.id)"
            >
              <p class="p-title">{{ item.smallTitle }}</p>
            </div>
          </div>
        </div>
        <div class="file-items" ref="fileRef2">
          <div class="file-bg file-bg2" @click="toMore(2)">评估和认证</div>

          <div class="file-item-box">
            <div
              class="file-item"
              v-for="item in list2"
              :key="item.id"
              @click="toNews(item.id)"
            >
              <p class="p-title">{{ item.smallTitle }}</p>
            </div>
          </div>
        </div>
        <div class="file-items" ref="fileRef3">
          <div class="file-bg file-bg3" @click="toMore(3)">教学评价</div>
          <div class="file-item-box">
            <div
              class="file-item"
              v-for="item in list3"
              :key="item.id"
              @click="toNews(item.id)"
            >
              <p class="p-title">{{ item.smallTitle }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-box">
    <img class="bg-img" src="@/assets/bg3.png" alt="" />
    <div class="technology" ref="technology">
      <Title
        :title="'教学媒体技术服务'"
        :tit="'Digital multimedia technical service'"
        :more="false"
      />
      <div>
        <div class="left">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中心致力于学校公共多媒体教室教学设备及标准化考场设备的建设、管理和维护，确保设备稳定运行，为广大师生提供课堂教学设备的技术支撑。<br />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;同时，
          我们不断探索新的教学手段和媒体模式，推广智慧教室和教学软件平台的使用，力求为师生提供更加丰富、便捷、高效的课堂教学体验，促进学校教育教学质量的不断提升。<br />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中心在朝晖校区、屏峰校区和莫干山校区分别设有教学多媒体总控室，通过呼叫应急处理、现场设备调试与维护等方式确保课堂教学活动的顺利进行。
        </div>
        <div class="right">
          <img src="@/assets/technology.png" alt="" />
        </div>
      </div>
    </div>
    <div class="multimedia" ref="multimedia">
      <div class="media-item">
        <div>
          <img src="@/assets/media1.png" />
        </div>
        <div class="media-info">
          多媒体设备<br />
          使用指南
        </div>
      </div>
      <div class="media-item">
        <div>
          <img src="@/assets/media2.png" />
        </div>
        <div class="media-info">
          多媒体设备<br />
          维护
        </div>
      </div>
      <div class="media-item">
        <div>
          <img src="@/assets/media3.png" />
        </div>
        <div class="media-info">
          标准化考场/
          <br />
          课程视频下载
        </div>
      </div>
    </div>
  </div>
  <div class="video_box">
    <img class="video_bg" src="@/assets/video_bg.jpg" alt="" />
    <div class="video">
      <Title
        :title="'视频资源服务'"
        :tit="'Video resource service'"
        :more="false"
        :color="'black'"
      />
      <img src="@/assets/video-bg.png" alt="" />
      <div class="video-item-box">
        <div class="video-item">
          <div>
            <img src="@/assets/num1.png" alt="" />
            <div class="video-item1">会议活动直播录制</div>
            <div class="video-item2">
              一键式操作流程，记录完整会议内容，方便快捷
            </div>
            <div class="video-item3">会议</div>
          </div>
        </div>

        <div class="video-item">
          <div>
            <img src="@/assets/num2.png" alt="" />
            <div class="video-item1">跨校区(互动)直播</div>
            <div class="video-item2">
              在线互动直播内容，多校区知识分享，高效合作
            </div>
            <div class="video-item3">直播</div>
          </div>
        </div>

        <div class="video-item">
          <div>
            <img src="@/assets/num3.png" alt="" />
            <div class="video-item1">高清录播/微课自主录制</div>
            <div class="video-item2">
              自主录制高清课程，规范化录制，清晰可见
            </div>
            <div class="video-item3">录播</div>
          </div>
        </div>
        <div class="video-item">
          <div>
            <img src="@/assets/num4.png" alt="" />
            <div class="video-item1">AI课程资源制作服务</div>
            <div class="video-item2">
              运用AI教学资源，自动化的制作，高效服务
            </div>
            <div class="video-item3">制作</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="link-box">
    <img class="link_bg" src="@/assets/link_bg.jpg" alt="" />
    <div class="other_link">
      <div class="title_box">
        <Title
          class="other_title"
          :title="'相关链接'"
          :tit="'Related links'"
          :more="false"
          :color="'black'"
        />
      </div>
      <div class="links_box">
        <div class="img1" @click="goto('https://eva.heec.edu.cn/login')">
          <div><img class="imgs1" src="@/assets/ce3.png" /></div>
          <span>全国普通高等学校本科教育教学评估系统</span>
        </div>
        <div class="img1" @click="goto('https://udb.heec.edu.cn')">
          <div><img class="imgs2" src="@/assets/ce2.png" /></div>
          <span>高等教育质量检测国家数据平台</span>
        </div>
        <div class="img1" @click="goto('https://www.ceeaa.org.cn/')">
          <div><img class="imgs3" src="@/assets/ce1.png" /></div>
          <span>工程教育专业认证协会</span>
        </div>
      </div>
    </div>
  </div>
  <Footer />
</template>
<script setup lang="ts">
import Nav from "./components/navBar.vue";
import Menu from "./components/menu.vue";
import Swiper from "./components/swiper.vue";
import Fonction from "./components/fonction.vue";
import Footer from "./components/footer.vue";
import Title from "./components/title.vue";
import { onMounted, onUnmounted, ref } from "vue";
import { useRouter } from "vue-router";
import request from "@/request/request";
const router = useRouter();
onMounted(() => {
  window.addEventListener("scroll", handleScroll);
  getList();
});
onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});

const newsLeft = ref();
const newsRight = ref();
const technology = ref();
const multimedia = ref();
const linkItem = ref();
const fileRef1 = ref();
const fileRef2 = ref();
const fileRef3 = ref();
const handleScroll = () => {
  const observer1 = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      newsLeft.value.style.opacity = 1;
      newsLeft.value.style.transform = "translateX(0)";
      newsRight.value.style.opacity = 1;
      newsRight.value.style.transform = "translateX(0)";
    } else {
      newsLeft.value.style.opacity = 0;
      newsLeft.value.style.transform = "translateX(10rem)";
      newsRight.value.style.opacity = 0;
      newsRight.value.style.transform = "translateX(-10rem)";
    }
  });
  observer1.observe(newsLeft.value);
  observer1.observe(newsRight.value);
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      technology.value.style.opacity = 1;
      technology.value.style.transform = "translateX(0)";
    } else {
      technology.value.style.opacity = 0;
      technology.value.style.transform = "translateX(-10rem)";
    }
  });
  observer.observe(technology.value);
  const observer2 = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      multimedia.value.style.opacity = 1;
      multimedia.value.style.transform = "translateX(0)";
    } else {
      multimedia.value.style.opacity = 0;
      multimedia.value.style.transform = "translateX(10rem)";
    }
  });
  observer2.observe(multimedia.value);
};
const toNews = (id: number) => {
  const routeData = router.resolve({
    path: "/news",
    query: { id },
  });
  // sessionStorage.setItem("news_info", JSON.stringify(item));
  window.open(routeData.href, "_blank");
};
const goto = (url: string) => {
  window.open(url, "_blank");
};
const toMore = (key: number) => {
  const routeData = router.resolve({
    path: "/newsList",
  });
  if (key == 1) {
    sessionStorage.setItem(
      "newlist",
      JSON.stringify([{ id: "quality_1", name: "教学质量保障" }])
    );
    sessionStorage.setItem("key", "quality_1");
  } else if (key == 2) {
    sessionStorage.setItem(
      "newlist",
      JSON.stringify([{ id: "quality_2", name: "评估和认证" }])
    );
    sessionStorage.setItem("key", "quality_2");
  } else {
    sessionStorage.setItem(
      "newlist",
      JSON.stringify([{ id: "quality_3", name: "教学评价" }])
    );
    sessionStorage.setItem("key", "quality_3");
  }
  window.open(routeData.href, "_blank");
};
const newsList: any = ref([]);
const newsImg = ref("");
const noticeList: any = ref([]);
const list1: any = ref([]);
const list2: any = ref([]);
const list3: any = ref([]);
const getList = () => {
  // 新闻动态
  request("findLatestNewsList", "post", { bannerType: "advert_type" }).then(
    (res: any) => {
      newsList.value = res.data.rows.splice(0, 2);
      newsImg.value = "http://121.40.105.156:8088" + res.data.rows[0].faceUrl;
    }
  );
  // 工作通知
  request("findNoticeList", "post", { bannerType: "advert_type" }).then(
    (res: any) => {
      noticeList.value = res.data.rows;
    }
  );
  // 教学质量保障
  request("findTecherQualityAssurance", "post", {
    bannerType: "advert_type",
  }).then((res: any) => {
    console.log(res.data.rows, "教学质量保障");
    list1.value = res.data.rows;
  });
  // 评估和认证
  request("findEvalAndVerify", "post", { bannerType: "advert_type" }).then(
    (res: any) => {
      console.log(res.data.rows, "评估和认证");
      list2.value = res.data.rows;
    }
  );
  // 教学评价
  request("findInstructionEval", "post", { bannerType: "advert_type" }).then(
    (res: any) => {
      console.log(res.data.rows, "教学评价");
      list3.value = res.data.rows;
    }
  );
};
</script>

<style lang="scss" scoped>
.nav_box {
  width: 100%;
}
.news-box {
  width: 100%;
  position: relative;
  padding-bottom: 2.5rem;
  .news-img {
    width: 100%;
    height: 32.75rem;
    position: absolute;
  }
}
.news {
  margin: 0 auto;
  width: 75rem;
  box-sizing: border-box;
  // padding: 0 22.5rem;
  padding-top: 2.5rem;
  display: flex;
  justify-content: space-around;
  overflow: hidden;
  .news-left {
    flex: 10;
    opacity: 0;
    transform: translateX(10rem);
    transition: 1s;
    .tran-box {
      width: 39.5rem;
      height: 17.5rem;
      margin-top: 0.875rem;
      position: relative;
      overflow: hidden;
      border-top-left-radius: 0.625rem;
      border-top-right-radius: 0.625rem;
    }
    .news-img {
      width: 100%;
      height: 17.5rem;
      transition: 0.5s;
    }
    .news-img:hover {
      transform: scale(1.1);
    }
    .news-box1 {
      background-color: #f7f9fa;
      border-bottom-left-radius: 0.625rem;
      border-bottom-right-radius: 0.625rem;
      overflow: hidden;
      :last-child {
        border: 0;
      }
    }
  }
  .news-right {
    // width: 35.625rem;
    // height: 17.5rem;
    opacity: 0;
    transform: translateX(-10rem);
    transition: 1.5s;
    flex: 10;
    .right-box {
      height: 22.6rem;
      overflow: hidden;
      margin-top: 0.875rem;
      background-color: #f7f9fa;
      border-radius: 0.625rem;
      box-sizing: border-box;
      :last-child {
        border: 0;
      }
    }
  }
  .news-center {
    flex: 2;
  }
  .new-item {
    border-bottom: 0.0625rem solid #0f2e4d18;
    display: flex;
    justify-content: space-between;
    padding: 0 1.5rem;
    transition: 0.3s;
    :nth-child(1) {
      font-size: 1rem;
      color: #0f2e4d;
      line-height: 2.5rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      cursor: pointer;
    }
    :nth-child(2) {
      width: 8rem;
      text-align: right;
      font-size: 0.875rem;
      color: #96a3b1;
      line-height: 2.5rem;
    }
  }
  .new-item:hover {
    background-color: rgba(138, 174, 230, 0.2);
  }
}
.link-box {
  width: 100%;
  // margin-top: 3.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  .link-img {
    width: 100%;
    // height: 43.75rem;
    height: 36.5rem;
    position: absolute;
  }
  .link-title {
    margin-top: 2.5rem;
    margin-bottom: 0.875rem;
    z-index: 9;
  }
  > div {
    width: 75rem;
    display: flex;
    justify-content: space-between;
    .file-box {
      width: 75rem;
      display: flex;
      justify-content: space-between;
      z-index: 9;
      .file-items {
        width: 23.75rem;
        // height: 21.25rem;
        height: 25.875rem;
        background-color: #f7f9fa;
        border-radius: 0.9375rem;
        display: flex;
        flex-direction: column;
        // opacity: 0;
        // transition: 2s;
        // transform: rotateY(-0.5turn);
        .file-bg {
          width: 23.75rem;
          height: 12.5rem;
          background-size: 110% 110%;
          background-repeat: no-repeat;
          background-position: 50% 50%;
          font-weight: 600;
          font-size: 1.25rem;
          color: #ffffff;
          text-align: center;
          line-height: 12.5rem;
          cursor: pointer;
          transition: 0.5s;
        }
        .file-bg1 {
          background-image: url("@/assets/file_bg1.png");
        }
        .file-bg2 {
          background-image: url("@/assets/file_bg2.png");
        }
        .file-bg3 {
          background-image: url("@/assets/file_bg3.png");
        }
        .file-bg:hover {
          background-size: 100% 100%;
        }
        .file-item-box {
          flex: 1;
          overflow: hidden;
          // overflow-y: scroll;
          .file-item {
            border-bottom: 0.0625rem solid #0f2e4d18;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            padding: 0 1.5rem;
            transition: 0.5s;
            .p-title {
              color: #0f2e4d;
              font-size: 1rem;
              line-height: 3.3125rem;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            .p-time {
              width: 7.5rem;
              margin: 0 0.625rem;
              color: #94a3af;
              font-size: 0.875rem;
              text-align: right;
            }
            .p-img {
              width: 1.25rem;
              height: 1.25rem;
            }
          }
          .file-item:hover {
            background-color: rgba(138, 174, 230, 0.2);
          }
          :last-child {
            border: 0;
          }
        }
      }
    }
  }
  .link_bg {
    width: 100%;
    height: 26rem;
    position: absolute;
  }
  .other_link {
    display: flex;
    flex-direction: column;
    width: 100%;
    // background-color: #f7f8fa;
    z-index: 9;
    .title_box {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 2.5rem 0;
      .other_title {
        z-index: 9;
      }
    }

    .links_box {
      width: 75rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .img1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        > div {
          background-color: #fff;
          width: 18.75rem;
          height: 7.5rem;
          display: flex;
          justify-content: center;
          align-items: center;
          .imgs1 {
            width: 5rem;
            height: 5rem;
          }
          .imgs2 {
            width: 4.375rem;
            height: 4.375rem;
          }
          .imgs3 {
            width: 8.75rem;
            height: 1.95rem;
          }
        }
        > span {
          font-size: 1rem;
          color: #06458b;
          line-height: 1.375rem;
          margin-top: 1.25rem;
          margin-bottom: 6.25rem;
        }
      }
    }
  }
  .links_box {
    width: 75rem;
    display: flex;
    .links_left {
      flex: 1;
      margin-top: 4.375rem;
      margin-bottom: 5rem;
      padding-right: 1.875rem;
      box-sizing: border-box;
      height: 20.5rem;
      font-weight: 400;
      font-size: 1rem;
      color: #0f2e4d;
      line-height: 2rem;
      overflow: hidden;
      text-overflow: ellipsis;
      z-index: 9;
      color: #fff;
    }
    // .img1 {
    //   margin-bottom: 1.25rem;
    //   align-items: center;
    //   z-index: 9;
    //   cursor: pointer;
    //   > div {
    //     width: 10.625rem;
    //     height: 100%;
    //     display: flex;
    //     justify-content: center;
    //     align-items: center;
    //     flex-shrink: 0;
    //     .imgs1 {
    //       width: 5rem;
    //       height: 5rem;
    //     }
    //     .imgs2 {
    //       width: 4.375rem;
    //       height: 4.375rem;
    //     }
    //     .imgs3 {
    //       width: 8.75rem;
    //       height: 1.95rem;
    //     }
    //   }
    //   span {
    //     text-align: center;
    //     padding-right: 1.875rem;
    //     color: #0f2e4d;
    //   }
    // }
  }
}
.bg-box {
  width: 100%;
  position: relative;
  margin-top: 3.75rem;
  overflow: hidden;
  padding-bottom: 2.5rem;
  .bg-img {
    position: absolute;
    width: 100%;
    height: 36.25rem;
  }
}
.technology {
  // min-height: 12.5rem;
  margin: 0 auto;
  width: 75rem;
  box-sizing: border-box;
  padding: 2.5rem 0 3.75rem;
  opacity: 0;
  transform: translateX(-10rem);
  transition: 2s;
  > div {
    display: flex;
    .left {
      flex: 1;
      padding-top: 0.625rem;
      padding-right: 1.875rem;
      padding-bottom: 1.625rem;
      box-sizing: border-box;
      height: 16.25rem;
      font-weight: 400;
      font-size: 1rem;
      color: #fff;
      line-height: 2rem;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .right {
      width: 37.5rem;
      height: 16.25rem;
      overflow: hidden;
      position: relative;
      img {
        width: 37.5rem;
        height: 16.25rem;
        transition: 0.5s;
      }
      img:hover {
        transform: scale(1.1);
      }
    }
  }
}

.multimedia {
  margin: 0 auto;
  width: 75rem;
  // padding: 0 22.5rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  transform: translateX(10rem);
  transition: 2s;
  .media-item {
    width: 23.75rem;
    height: 7.5rem;
    display: flex;
    background-color: #fff;
    > div {
      width: 11.25rem;
      height: 7.5rem;
      overflow: hidden;
      img {
        width: 11.25rem;
        height: 7.5rem;
        transition: 0.5s;
      }
      img:hover {
        transform: scale(1.1);
      }
    }
    .media-info {
      display: flex;
      align-items: center;
      font-size: 1.125rem;
      color: #0f2e4d;
      line-height: 2rem;
      padding-left: 1.875rem;
      box-sizing: border-box;
    }
  }
}
.video_box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 37.5rem;
  .video_bg {
    width: 100%;
    height: 37.5rem;
    // position: absolute;
  }
}
.video {
  width: 75rem;
  box-sizing: border-box;
  padding: 3.75rem 0 3.75rem;
  // margin-top: -37.5rem;
  position: absolute;
  margin-bottom: 20px;
  img {
    width: 100%;
    margin-top: 0.875rem;
  }
  .video-item-box {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: -8.125rem;
    // position: absolute;
  }
  .video-item {
    width: 15.625rem;
    height: 18.75rem;
    background-color: #fff;
    box-sizing: border-box;
    padding: 1.75rem 0;
    > div {
      padding: 0.625rem 1.7rem;
      border-right: 0.125rem solid #e7eaed;
    }
    img {
      width: 3rem;
      height: 2.8125rem;
    }
    .video-item1 {
      font-weight: 600;
      font-size: 1.125rem;
      color: #0f2e4d;
      line-height: 1.5625rem;
      margin-top: 1.0625rem;
    }
    .video-item2 {
      font-size: 0.875rem;
      color: #8c9aa8;
      line-height: 1.25rem;
      margin-top: 0.5rem;
    }
    .video-item3 {
      width: 5rem;
      height: 2.25rem;
      border: 0.0625rem solid #0f2e4d;
      text-align: center;
      line-height: 2.25rem;
      font-size: 1rem;
      color: #0f2e4d;
      margin-top: 2.5rem;
      cursor: pointer;
    }
  }
  :last-child {
    > div {
      border: 0;
    }
  }
}
</style>
